<template>
	<view class="big">
		<!-- 轮播图组件 -->
		<swiper style="height:340rpx;color:white">
			<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
				<image :src="item" mode="widthFix" style="width: 100%;"></image>
			</swiper-item>
		</swiper>
		<!-- 楼层1 -->
		<view class="one box">
			<view class="item" v-for="(item,index) in floor.filter(ite=>{return ite.type=='approve'})" :key="index"
				:class="{gl:index!=0}" @click="detail(item.routeIndex)">
				<img :src="item.icon" alt="" style="width: 50px">
				<view class="right">
					<p>{{item.title}}</p>
					<p>{{item.subTitle}}</p>
				</view>
			</view>
		</view>
		<!-- 楼层2 -->
		<view class="box2">
			<view class="often">
				<span style="font-size: 40px;color: cornflowerblue;margin-right: 10px;">·</span>
				<span>常用服务</span>
			</view>
			<u-grid :col="4">
				<u-grid-item v-for="(item,index) in floor.filter(ite=>{return ite.type=='common'})" :key="index"
					@click="detail(item.routeIndex)">
					<u-icon :name="item.icon" :size="46"></u-icon>
					<view class="grid-text">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 楼层3 -->
		<view class="box2">
			<view class="often">
				<span style="font-size: 40px;color: coral;margin-right: 10px;">·</span>
				<span>其他服务</span>
			</view>
			<u-grid :col="4">
				<u-grid-item v-for="(item,index) in floor.filter(ite=>{return ite.type=='other'})" :key="index"
					@click="detail(item.routeIndex)">
					<u-icon :name="item.icon" :size="46"></u-icon>
					<view class="grid-text">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 第三方插件用法-uview框架 -->
		<!-- <u-button @click="show = true">打开uview演示</u-button>
		<u-calendar v-model="show" :mode="mode"></u-calendar> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from '@/api/api.js'

	export default {
		data() {
			return {
				bannerList: ["https://static.jeecg.com/upload/test/banner0_1595850438042.jpeg"],
				show: false,
				mode: 'date',
				floor: []
			}
		},
		onLoad() {
			//调用轮播
			this.getFloor()
		},
		methods: {
			// 获取楼层列表
			async getFloor() {
				let res = await api.setFloor()
				console.log(res, '获取楼层列表')
				this.floor = res.result.route
			},
			// 跳转至楼层详情
			detail(address) {
				if (address == "") {
					this.showToast("暂无该功能",
						'default')
				} else {
					console.log(address, "跳转地址");
					// 跳转路由
					uni.navigateTo({
						url: "/pages/applyform/" + address
					})
				}
			},
			// 出现提示
			showToast(title, type) {
				this.$refs.uToast.show({
					title: title,
					type: type
				})
			}
		}
	}
</script>

<style lang="scss">
	.big {
		width: 100%;
		background-color: #e8e8e8;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	// 轮播图
	.swiper-item {
		width: 100%;
	}

	// 楼层
	.box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 20px;
	}

	// 第一层
	.one {
		width: 100%;
		height: 70px;
		background: #fff;

		.item {
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.right {
				width: 50%;
				text-align: center;
			}
		}
	}

	.box2 {
		width: 100%;
		background: #fff;

		// 楼层标题
		.often {
			width: 100%;
			height: 50px;
			line-height: 50px;
			display: flex;
			align-items: center;
			padding-left: 20px;
			font-size: 16px;
		}



		// 第二层
		.two {
			width: 100%;

			.item {
				width: 25%;
				height: 80px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.right {
					text-align: center;
				}
			}
		}

	}

	.gl {
		box-sizing: border-box;
		border-left: 1px solid #ddd;
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
